<template>

  <div class="app">
    <el-main>

      <el-form :inline="true" class="search-form" style="margin-top: 20px">
        <el-form-item label="公司ID号:">
          <el-input v-model="state.gsid" placeholder="请输入公司ID号" style="width: 180px" clearable></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="load">
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
            <span style="vertical-align: middle">查询</span>
          </el-button>
          <el-button type="primary" @click="createForm">
            <span style="vertical-align: middle">添加企业</span>
          </el-button>
        </el-form-item>
      </el-form>



      <el-table :data="state.tableData">
        <el-table-column label="编号" prop="id" width="85"></el-table-column>
        <el-table-column label="公司ID号" prop="gsid" width="85"></el-table-column>
        <el-table-column label="公司名称" prop="gsmc" width="85"></el-table-column>
        <el-table-column label="所在城市" prop="cs" width="85"></el-table-column>
        <el-table-column label="信用证" prop="gsxyz" width="85"></el-table-column>
        <el-table-column label="公司地址" prop="gsdz" width="85"></el-table-column>
        <el-table-column label="营业执照" prop="gsyyzz" width="85"></el-table-column>
        <el-table-column label="使用版本" prop="xtbb" width="85">
          <template v-slot:default="{row}">
            <span v-if="row.xtbb === '0'">试用版</span>
            <span v-else-if="row.xtbb === '1'">正式版</span>
          </template>
        </el-table-column>
        <el-table-column label="人工坐席数量" prop="rgzxsl" width="85"></el-table-column>
        <el-table-column label="机器人总量" prop="jqrsl" width="85"></el-table-column>
        <el-table-column label="收费方式" prop="sffs" width="85">
          <template v-slot:default="{row}">
            <span v-if="row.sffs === '1'">预付</span>
            <span v-else-if="row.sffs === '2'">按月结算</span>
            <span v-else-if="row.sffs === '3'">按季结算</span>
          </template>
        </el-table-column>
        <el-table-column label="结算货币" prop="jshb" width="85"></el-table-column>
        <el-table-column label="账号余额" prop="zhye" width="85"></el-table-column>
        <el-table-column label="联系人" prop="lxr" width="85"></el-table-column>
        <el-table-column label="联系人电话" prop="lxrdh" width="85"></el-table-column>


        <!--          <template v-slot:default="{row}">-->
        <!--            <span v-if="row.sffs === '1'">预付</span>-->
        <!--            <span v-else-if="row.sffs === '2'">按月结算</span>-->
        <!--            <span v-else-if="row.sffs === '3'">按季结算</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->


        <el-table-column label="操作">
          <template v-slot:default="{row}">
            <el-button type="primary" width="85" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" width="85"  @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>



      <el-pagination background layout="sizes,prev, pager, next"
                     :page-sizes="[5, 10, 15, 20,30]"
                     v-model:current-page="state.pageNum"
                     v-model:page-size="state.pageSize"
                     :total="state.total1"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" />
    </el-main>
  </div>


  <el-dialog v-model="dialogVisible" title="企业信息" @close="resetFormData">
    <el-form :model="state.formData">

      <el-form-item label="公司ID:">
        <el-input v-model="state.formData.gsid" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="公司名称:">
        <el-input v-model="state.formData.gsmc" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="所在城市:">
        <el-input v-model="state.formData.cs" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="信用证:">
        <el-input v-model="state.formData.gsxyz" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="公司地址:">
        <el-input v-model="state.formData.gsdz" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="营业执照:">
        <el-input v-model="state.formData.gsyyzz" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="使用版本:">
        <el-radio-group v-model="state.formData.xtbb">
          <el-radio :label="0">试用版</el-radio>
          <el-radio :label="1">正式版</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="人工坐席数量:">
        <el-input v-model="state.formData.rgzxsl" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="机器人总量:">
        <el-input v-model="state.formData.jqrsl" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="收费方式:">
        <el-radio-group v-model="state.formData.sffs">
          <el-radio :label="1">预付</el-radio>
          <el-radio :label="2">按月结算</el-radio>
          <el-radio :label="3">按季结算</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="结算货币:">
        <el-input v-model="state.formData.jshb" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="账户余额:">
        <el-input v-model="state.formData.zhye" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="联系人:">
        <el-input v-model="state.formData.lxr" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="联系电话:">
        <el-input v-model="state.formData.lxrdh" style="width: 200px"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
<!--      <el-button @click="dialogVisible = false">取消</el-button>-->
      <el-button type="primary" @click="confirmLabel">确定</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </span>

  </el-dialog>

</template>


<script setup>
import {computed, onMounted, reactive, ref, watchEffect} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

// import { provide,inject } from 'vue';
//
// const globalValue = inject('globalValue');


const state = reactive({
  gsid:'',
  tableData : [],
  formData : {
    gsid: null,
    gsmc: null,
    cs: null,
    gsxyz:null,
    gsdz:null,
    gsyyzz: null,
    xtbb: null,
    rgzxsl: null,
    jqrsl: null,
    sffs: null,
    jshb: null,
    zhye: null,
    lxr: null,
    lxrdh: null

  },
  isEditing: false,
  total1:0,
  pageNum:1,
  pageSize:5
})
const selectALl=async ()=>{
  let params = new URLSearchParams();
  params.append("pageNum",state.pageNum);
  params.append("pageSize",state.pageSize);
  params.append("gsid",state.gsid);
  await request.post("knowledgeAdmin/gsxx/selectALl",params).then(res=>{

    console.log(res.data)
    state.tableData = res.data.items
    state.total1=res.data.total;

  })

}
const handleSizeChange=(size)=>{
  state.pageSie=size;
  selectALl()


}
const handleCurrentChange=(count)=>{

  state.pageNum=count;
  selectALl()
}

const load = () => {
 selectALl();
}

onMounted(()=>{
  load()
})


//删除
const handleDelete = (row) => {
  // 显示确认对话框
  ElMessageBox.confirm('确定删除该记录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(()=>{
    tianc(row);
    request.post("knowledgeAdmin/gsxx/delete",state.formData).then(res=>{
      ElMessage.success('删除成功')
      load()
    }).catch(error=>{
      console.log(error);
      ElMessage.error('删除失败')
    })
    resetFormData();
  })
};

//表单
const dialogVisible = ref(false);

const addLabel = () => {
  request.post("knowledgeAdmin/gsxx/insert",state.formData ).then(res => {
    ElMessage.success('添加成功');
    load();
  }).catch(error =>{
    console.log(error);
    ElMessage.error('添加失败')
  })
  resetFormData();
  dialogVisible.value = false;
}

const updateLabel = () => {
  request.post("knowledgeAdmin/gsxx/update",state.formData ).then(res => {
    ElMessage.success('更新成功');
    load();
  }).catch(error => {
    console.log(error);
    ElMessage.error('更新失败')
  })
  resetFormData();
  dialogVisible.value = false;
};


const tianc= (row) => {
  state.formData.gsid = row.gsid
  state.formData.gsmc = row.gsmc;
  state.formData.cs = row.cs;
  state.formData.gsxyz = row.gsxyz;
  state.formData.gsdz = row.gsdz;
  state.formData.gsyyzz = row.gsyyzz;
  state.formData.xtbb = row.xtbb;
  state.formData.rgzxsl = row.rgzxsl;
  state.formData.jqrsl = row.jqrsl;
  state.formData.sffs = row.sffs;
  state.formData.jshb = row.jshb;
  state.formData.zhye = row.zhye;
  state.formData.lxr = row.lxr;
  state.formData.lxrdh = row.lxrdh;
};

const createForm =()=>{
  // state.formData.fbq = [{ value: '' }];
  state.isEditing = false; // 重置isEditing
  dialogVisible.value = true;
}

const resetFormData = () => {
  state.formData.gsid = null;
  state.formData.gsmc = null;
  state.formData.cs = null;
  state.formData.gsxyz=null;
  state.formData.gsdz=null;
  state.formData.gsyyzz=null;
  state.formData.xtbb=null;
  state.formData.rgzxsl=null;
  state.formData.jqrsl=null;
  state.formData.sffs=null;
  state.formData.jshb=null;
  state.formData.zhye=null;
  state.formData.lxr=null;
  state.formData.lxrdh=null;
  state.isEditing = false; // 重置isEditing
};

//编辑
const handleEdit = (row) => {
  // 填充表单数据
  dialogVisible.value = true;
  state.formData.gsid = row.gsid
  state.formData.gsmc = row.gsmc;
  state.formData.cs = row.cs;
  if(row.sffs === '1'){
    state.formData.sffs = 1;
  }else if(row.sffs === '2'){
    state.formData.sffs = 2;
  }else if(row.sffs === '3'){
    state.formData.sffs = 3;
  }
  state.formData.gsxyz = row.gsxyz;
  state.formData.gsdz = row.gsdz;
  state.formData.gsyyzz = row.gsyyzz;
  if(row.xtbb === '0'){
    state.formData.xtbb = 0;
  }else if(row.xtbb === '1') {
    state.formData.xtbb = 1;
  }
  state.formData.rgzxsl = row.rgzxsl;
  state.formData.jqrsl = row.jqrsl;
  state.formData.jshb = row.jshb;
  state.formData.zhye = row.zhye;
  state.formData.lxr = row.lxr;
  state.formData.lxrdh = row.lxrdh;
  //state.formData.sffs = row.sffs; // 假设fbq是一个由`|`分隔的字符串
  state.isEditing = true; // 设置isEditing为true
};

const confirmLabel = () => {
  if (state.isEditing) {
    updateLabel();
  } else {
    addLabel();
  }
};

</script>

<style>
</style>
